$(function () {
  (function (window, undefined) {
    const init = {
      initList: () => {
        $.ajax({
          url: 'http://localhost:3000/books',
          type: 'get',
          dataType: 'json',
          success: (data) => {
            // 渲染数据列表
            let html = template('indexTpl', { list: data });
            $('#dataList').html(html);
            // 必须在渲染完成之后才可以操作DOM标签
            $('#dataList').find('tr').each((index, element) => {
              let td = $(element).find('td:eq(5)');
              td.find('a:eq(0)').on('click', () => {
                let id = $(element).find('td:eq(0)').text();
                init.editBook(id);
              })
              td.find('a:eq(1)').on('click', function () {
                let id = $(this).parent().parent().find('td:eq(0)').text();
                init.deleteBook(id);
              });
              // 绑定添加图书信息的单击事件
              init.addBook();
              // 重置表单
              let form = $('#addBookForm');
              form.get(0).reset();
              $('input[type=hidden]').val('');
            })
          }
        });
      },
      addBook: () => {
        $("#addBookId").on('click', function () {
          let form = $('#addBookForm');
          // 实例化弹窗对象 (dialog.js)
          let mark = new MarkBox(600, 400, '添加图书', form.get(0));
          mark.init();
          form.find('input[type=button]').off('click').on('click', function () {
            $.ajax({
              type: 'post',
              url: '/books/book',
              data: form.serialize(),
              dataType: 'json',
              success: (data) => {
                if (data.flag == 1) {
                  // 关闭弹窗
                  mark.close();
                  // 添加图书成功后重新渲染数据列表
                  init.initList();
                } else {

                }
              }
            })
          })
        });
      },
      deleteBook: (id) => {
        $.ajax({
          url: '/books/book/' + id,
          type: 'delete',
          dataType: 'json',
          success: (data) => {
            console.log(data)
            // 删除图书信息之后重新渲染页面
            if (data.flag == 1) {
              init.initList();
            }
          }
        });
      },
      editBook: (id) => {
        $.ajax({
          type: 'get',
          url: '/books/book/' + id,
          dataType: 'json',
          success: function (data) {
            console.log(data);
            let form = $('#addBookForm');
            let mark = new MarkBox(600, 400, '编辑图书', form.get(0));
            mark.init();
            form.find('input[name=name]').val(data.name);
            form.find('input[name=author]').val(data.author);
            form.find('input[name=category]').val(data.category);
            form.find('input[name=description]').val(data.description);
            form.find('input[name=id]').val(data.id);
            // 对表单提交按钮重新绑定单击事件
            form.find('input[type=button]').off('click').on('click', () => {
              // 编辑完成之后重新提交表单
              $.ajax({
                type: 'put',
                url: '/books/book',
                data: form.serialize(),
                dataType: 'json',
                success: (data) => {
                  if (data.flag == 1) {
                    // 隐藏弹窗;
                    mark.close();
                    init.initList();
                  }
                }
              })
            })
          }
        });
      }
    }
    init.initList();

  })(window, undefined);
})


